<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>经纪人详情</title>
    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/jquery.tmpl.js"></script>

</head>
<body style="background: gainsboro">
<!-- 导航栏<nav class="navbar navbar-inverse navbar-fixed-top" style="min-height:0; height: 45px"> -->

<nav th:replace="~{topbar::top}"></nav>

<!--经纪人个人介绍模块-->
<div class="container" style="background: #fbfbfb; margin-top: 30px;">
    <div class="row">
        <div class="col-md-8">
            <ul>
                <li class="row" style="list-style: none; padding: 30px">
                    <img class="col-md-3" style="padding-top: 20px;">
                    <div class="col-md-9">
                        <h3><a style="color: black; text-decoration: none; font-weight: bold">杨凯</a></h3>
                        <input id="agengId" type="hidden" value="1">
                        <div class="row">
                            <h5 class="col-md-12">
                                <span>所属门店：</span>
                                <span>三千里店</span>
                            </h5>
                        </div>
                        <div class="row">
                            <h5 class="col-md-12">
                                <span>联系电话：</span>
                                <span>4008959600转9612</span>
                            </h5>
                        </div>
                        <div class="row">
                            <h5 class="col-md-12">
                                <span>工作时间：</span>
                                <span>3年</span>
                            </h5>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="col-md-4" style="padding-top: 40px">
            <div class="container" style="list-style: none">
                <h5 style="color: #db4c3f; display: inline">综合评分：</h5>
                <h5 style="color: #db4c3f; font-weight: bold; display: inline">5.0</h5>
            </div>
        </div>
    </div>
    <hr style="background-color: gainsboro; height: 1px; width: 1130px; margin: unset; border: unset">
    <div class="row">
        <div class="col-md-8">
            <ul>
                <li class="row" style="list-style: none; padding-left: 30px;padding-bottom: 10px">
                    <h3 style="color: black; text-decoration: none; font-weight: bold">经纪人自评：</h3>
                </li>
                <li class="row" style="list-style: none; padding-left: 30px;">
                    <label>本人于2009年6月15号入职链家地产从事房产工作，有丰富的专业知识，2013年也很荣幸的加入链家地产
                        荣誉【精英社】，2013年百万经纪人称号！，2016年百万经纪人称号！目前我主做成都13个区域一手房及二手房业务以及海外置业、海南房产！</label>
                </li>
            </ul>
        </div>
    </div>

    <script id="each1" type="text/x-jquery-tmpl">
        <div class="container">
                <div class="row">
                    <div class="col-md-9">
                        <ul>
                            <li class="row" style="list-style: none; padding: 30px">
                                <img class="col-md-4" src="house01.jpg">
                                <div class="col-md-8">
                                    <h3><a style="color: black; text-decoration: none; font-weight: bold" href="#4">${houseName}</a></h3>
                                    <div class="row">
                                        <h5 class="col-md-12">
                                            <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                                            <a style="color: black; text-decoration: none" href="#4">${estateName}</a>
                                            <span >${scale}</span>|
                                            <span >${houseArea}平</span>|
                                            <span >朝向：${orientation}</span>
                                        </h5>
                                    </div>
                                    <div class="row">
                                        <h5 class="col-md-12">
                                            <span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
                                            <span >${floor}</span>-
                                            <span >${decoration}</span>
                                        </h5>
                                    </div>
                                    <div class="row">
                                        <h5 class="col-md-12">
                                            <span class="glyphicon glyphicon-star-empty" aria-hidden="true"></span>
                                            <span >${createTime}</span>
                                        </h5>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </div>
                    <div class="col-md-3" style="padding-top: 40px">
                        <div class="container" style="list-style: none">
                            <h2 style="color: #db4c3f; font-weight: bold; display: inline">${price}</h2>
                            <h5 style="display: inline">万</h5>
                        </div>
                        <div class="container" style="display: block; list-style: none">单价<h5 style="display: inline">20618</h5>元/平米</div>
                    </div>
                </div>
                <hr style="background-color: aliceblue; height: 2px; width: 1130px; margin: unset; border: unset">
            </div>


    </script>
    <script id="pageview" type="text/x-jquery-tmpl">
        <div class="row">
            <nav style="text-align: right" aria-label="Page navigation">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous" id="first">
                            <span aria-hidden="true">首页</span>
                        </a>
                    </li>

                    <li >
                        <a href="#" id="pre" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>

                    <li ><a id="text" style="color: black">第${current}页/共${pages}页</a></li>
                    <li >
                        <a href="#" id="next" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span></a>
                    </li>

                    <li>
                        <a href="#" id="final">
                            <span aria-hidden="true" >末页</span>
                        </a>
                    </li>

                </ul>
            </nav>
        </div>
    </script>

    <script id="each2" type="text/x-jquery-tmpl">
        <div class="container">
                <div class="row">
                    <div class="col-md-9">
                        <ul>
                            <li class="row" style="list-style: none; padding-left: 30px">
                                <div class="col-md-9">
                                    <span style="font-weight: bold">用户评分：</span>
                                    <h3 style="color: #db4c3f; font-weight: bold; display: inline">5.0</h3>
                                    <div class="row">
                                        <h5 class="col-md-12">
                                            <span style="color: grey">用户：</span>
                                            <span style="color: grey">1*****9</span>
                                        </h5>
                                    </div>
                                    <div class="row">
                                        <h5 class="col-md-12" style="padding-top: 10px;padding-bottom: 10px">
                                            <span style="font-size: large">评价内容收到了困啦看那个卡桑德拉开发的离开家阿桑地方看来是可怜的噶老师开的房间啊了</span>
                                        </h5>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-2" style="padding-top: 10px">
                        <div class="container" style="list-style: none">
                            <h5 style="display: inline">2018.06.02</h5>
                        </div>
                    </div>
                </div>
                <hr style="background-color: aliceblue; height: 2px; width: 1130px; margin: unset; border: unset">
            </div>






    </script>

    <script>

        function changeColor1() {
            document.getElementById("tag1").style.background = 'lightgreen';
            document.getElementById("tag2").style.background = 'none';
        }

        function changeColor2() {
            document.getElementById("tag1").style.background = 'none';
            document.getElementById("tag2").style.background = 'lightgreen';
        }

        var hasNextPage;
        var hasPrePage;
        var agentId;
        var current;
        var sumpage;


        $(function () {
            $("#tag1").click(function () {
                agentId = $("#agengId").val();
                $.ajax({
                    type: "get",
                    url: "/ajax_house_list?agentId="+ agentId,
                    dataType: "json",
                    success: populate
                });

                function populate(data) {
                    console.log(data);
                    hasNextPage = eval('data.hasNextPage');
                    hasPrePage = eval('data.hasPrePage');
                    current=eval('data.current');
                    sumpage=eval('data.pages');
                    //模板   绑定    数据      添加到   指定的div或者是容器里面
                    $('#content').html('');
                    $('#each1').tmpl(eval('data.result')).appendTo('#content');
                    $('#page').html('');
                    $('#pageview').tmpl(data).appendTo('#page');

                    $("#next").click(function () {
                        if(hasNextPage){
                            $.ajax({
                                type: "get",
                                url: "/ajax_house_list?agentId=" + agentId+"&page="+ (++current),
                                dataType: "json",
                                success: solve
                            });
                            function solve(data) {
                                hasNextPage = eval('data.hasNextPage');
                                hasPrePage = eval('data.hasPrePage');
                                current=eval('data.current');
                                console.log(data);
                                console.log(hasPrePage);
                                console.log(hasNextPage);
                                //模板   绑定    数据      添加到   指定的div或者是容器里面
                                $('#content').html('');
                                $('#each1').tmpl(eval('data.result')).appendTo('#content');
                               /* $('#pageview').tmpl(data).replaceAll('#page');*/
                                $("#text").text("第"+current+"页/共"+sumpage+"页");
                            }

                        }
                    });
                    $("#pre").click(function () {
                        console.log(hasPrePage);
                        if(hasPrePage){
                            $.ajax({
                                type: "get",
                                url: "/ajax_house_list?agentId=" + agentId+"&page="+(--current),
                                dataType: "json",
                                success: solve
                            });
                            function solve(data) {
                                hasNextPage = eval('data.hasNextPage');
                                hasPrePage = eval('data.hasPrePage');
                                current=eval('data.current');
                                console.log(data);
                                console.log(hasPrePage);
                                console.log(hasNextPage);
                                //模板   绑定    数据      添加到   指定的div或者是容器里面
                                $('#content').html('');
                                $('#each1').tmpl(eval('data.result')).appendTo('#content');
                                $("#text").text("第"+current+"页/共"+sumpage+"页");
                                /*$('#pageview').tmpl(data).replaceAll('#page');*/
                            }

                        }
                    })
                    $("#first").click(function () {
                        if(current!=1){
                            $.ajax({
                                type: "get",
                                url: "/ajax_house_list?agentId=" + agentId+"&page="+1,
                                dataType: "json",
                                success: solve
                            });
                            function solve(data) {
                                hasNextPage = eval('data.hasNextPage');
                                hasPrePage = eval('data.hasPrePage');
                                current=eval('data.current');
                                console.log(data);
                                console.log(hasPrePage);
                                console.log(hasNextPage);
                                //模板   绑定    数据      添加到   指定的div或者是容器里面
                                $('#content').html('');
                                $('#each1').tmpl(eval('data.result')).appendTo('#content');
                                /* $('#pageview').tmpl(data).replaceAll('#page');*/
                                $("#text").text("第"+current+"页/共"+sumpage+"页");
                            }

                        }
                    });
                    $("#final").click(function () {
                        if(hasNextPage&&current!=sumpage){
                            $.ajax({
                                type: "get",
                                url: "/ajax_house_list?agentId=" + agentId+"&page="+ sumpage,
                                dataType: "json",
                                success: solve
                            });
                            function solve(data) {
                                hasNextPage = eval('data.hasNextPage');
                                hasPrePage = eval('data.hasPrePage');
                                current=eval('data.current');
                                console.log(data);
                                console.log(hasPrePage);
                                console.log(hasNextPage);
                                //模板   绑定    数据      添加到   指定的div或者是容器里面
                                $('#content').html('');
                                $('#each1').tmpl(eval('data.result')).appendTo('#content');
                                /* $('#pageview').tmpl(data).replaceAll('#page');*/
                                $("#text").text("第"+current+"页/共"+sumpage+"页");
                            }

                        }
                    });
                }


            });



            $("#tag2").click(function () {

                var userLangs = [
                    {
                        estate_name: 'abcde',
                        house_name: 'think8848',
                        house_area: 'Joseph Chan',
                        create_time: ['Chinese', 'English']
                    },
                    {
                        estate_name: 'abcde',
                        house_name: 'think8848',
                        house_area: 'Joseph Chan',
                        create_time: ['Chinese', 'English']
                    }];
                //模板   绑定    数据      添加到   指定的div或者是容器里面
                $('#content').html('');
                $('#each2').tmpl(userLangs).appendTo('#content');
                /* console.log(userLangs);*/
            })

        });



    </script>
    <div class=" text-center"
         style="padding-top: 30px; padding-bottom:30px; margin: auto; top: 0; bottom: 0; left: 0; right: 0">
        <div class="row">
            <ul>
                <li class="col-md-2" style="list-style: none; background: lightgreen" id="tag1" flag="each1">
                    <h4><a href="#1" id="tap1" onclick="changeColor1()" class="selectli1"
                           style="color: black; text-decoration: none; display: inline-block; width: 150px; height: 20px"><span
                            class="selectspan1">二手房源</span></a></h4>
                </li>
                <li class="col-md-2" style="list-style: none" id="tag2" flag="each2">
                    <h4><a href="#2" id="tap2"
                           onclick="changeColor2()"
                           style="color: black; text-decoration: none; display: inline-block; width: 150px; height: 20px"><span>用户评价</span></a>
                    </h4>
                </li>
            </ul>
        </div>
        <div style="padding-left: 25px">
            <hr style="background-color: lightgreen; height: 2px; margin: unset; border: unset">
        </div>
    </div>

    <div class="content1">
        <!--二手房列表-->
        <div id="content">

        </div>
        <div id="page"></div>



    </div>

</div>

</body>
</html>